<template>
  <SysDialog
    :title="dialogBasic.title"
    :width="dialogBasic.width"
    :height="dialogBasic.height"
    :show-footer="dialogBasic.showFooter"
    :visible="dialogBasic.visible"
    :margin-top="dialogBasic.marginTop"
    @on-close="onClose"
    @on-confirm="onConfirm"
  >
    <template v-slot:content>
      <div class="channel-form">
        <el-form
          ref="ruleFormRef"
          :model="channelForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="黑名单值" prop="value">
            <el-input v-model="channelForm.value"  placeholder="请输入黑名单值" />
          </el-form-item>

       

          <el-form-item
            label="黑名单类型"
            prop="type"
          >
            <el-select
              v-model="channelForm.type"
              placeholder="请选择黑名单类型"
            >
          
              <el-option
                v-for="(item,index) in blackAndWhiteType"
                :key="item"
                :label="item"
                :value="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="原因" >
            <el-input v-model="channelForm.reason"  placeholder="请输入原因" clearable />
          </el-form-item>
        </el-form>
      </div>
    </template>
  </SysDialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search, Minus, Plus } from "@element-plus/icons-vue";
import { useEnumStore } from "@/store/enumeration";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import { blackAddPost } from "@/api/blackAndWhite";
import useInstance from "@/hooks/useInstance";
const {blackAndWhiteType} = storeToRefs(useEnumStore())
defineOptions({
  name: "addListWhite",
});

const emit = defineEmits(["refresh",'searchEdit']);
const { global } = useInstance();
const dialogBasic = ref({
  title: "新建黑名单",
  visible: false,
  width: 600,
  height: 550,
  showFooter: true,
  marginTop: "10vh",
});

const ruleFormRef = ref<FormInstance>();

const channelForm = reactive<any>({
  type: null, //  枚举
  value: null, //  白名单值
  reason: null, //进入白名单原因
});
const rules = reactive<FormRules>({
  type: [
    {
      required: true,
      trigger: "blur",
      message: "请选择黑名单类型",
    },
  ],
  value: [
    {
      required: true,
      trigger: "blur",
      message: "请输入黑名单值",
    },
  ],
  reason: [
    {
      required: true,
      trigger: "blur",
      message: "请输入黑名单原因",
    },
  ],
});
//显示弹框
const show = (type: string, row?: any) => {
  dialogBasic.value.visible = true;
  if (type === "add") {
    dialogBasic.value.title = "新增黑名单";
    dialogBasic.value.height = 500;
    global.$resetForm(ruleFormRef.value, channelForm);

    resetForm();
  } else {
    dialogBasic.value.height = 550;
    global.$resetForm(ruleFormRef.value, channelForm);
    dialogBasic.value.title = "编辑黑名单";
    
    global.$objCopy(channelForm, row);
  }
};
const onClose = () => {
  dialogBasic.value.visible = false;
  resetForm();
};
const onConfirm = async () => {
  await ruleFormRef.value?.validate(async (isOk) => {
    if (isOk) {
      const res = await blackAddPost({ ...channelForm });
      if (res.code == 20000) {
        ElMessage({
          type: "success",
          message: channelForm.id ? "黑名单编辑成功" : "黑名单新增成功",
        });
      }
      if(channelForm.id){
        emit('searchEdit')
      }else{

        emit("refresh");
      }
      onClose();
    } else {
      ElMessage({
        type: "error",
        message: channelForm.id
          ? "黑名单编辑失败 请重试！"
          : "黑名单新增失败 请重试！",
      });
    }
  });
};

const resetForm = () => {
  ruleFormRef.value?.resetFields();
};

defineExpose({
  show,
});
</script>

<style></style>
